<template>
	<view class="repair-wrap">
		<view style="padding: 6px 20px;">
		  <text style="font-size: 14px;color: #999;">请选择违规类型、帮助我们精准处理</text>
		</view>
		<view style="padding: 10px 15px;">
		  <checkbox-group @change="checkboxChange">
		    <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in items" :key="item.value">
		
		      <view style="font-size: 15px;padding: 10px;">{{item.name}}</view>
		      <view style="float: right;margin-top: -32px;">
		        <checkbox :value="item.value" style="transform:scale(0.8)" :checked="item.checked" />
		      </view>
		    </label>
		  </checkbox-group>
		</view>
		<view style="padding: 10px 24px;">
			<u-form label-width='220'  ref="actForm">
			  <u-form-item  label-position='top'  label="举报原因">
			    <u-input v-model="fromParams.report_reason"  type='textarea' :border='true'  />
			  </u-form-item>
			</u-form>
		</view>
		<view style="border-bottom: 1px solid #EEEEEEFF;padding-bottom: 41px;width: 89%;margin: 0 auto;">
			<view class="guarn-box u-m-t-60">
				<view class="header-name"><h3>上传图片</h3></view>
				<view style="display: flex;">
					<view class="guarn-box guarn-box2 u-m-t-20" v-for="(item,index) in images" >
						<view class="guarn-box2-img">
							<image :src="item"></image>
							<u-icon @click="colseImg(item)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
					<view class="guarn-box u-m-t-20"  >
						<view  class="guarn-box-img">
							<image @click="uoloadHouse"  class="u-m-t-72" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/camera.svg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="guarn-box-txt" style="margin-top: 16px;">
				<view class="u-font-24 u-m-b-10">
					提示：最多上传3张照片
				</view>
				
			</view>
		</view>
		<view style="margin-top: 30px;padding-bottom: 20px;">
			<button class="yilingqu" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				items: [{
				  value: '1',
				  name: '色情低俗',
				  checked:false,
				},
				  {
				    value: '2',
				    name: '辱骂我或他人',
				    checked:false,
				  },
				  {
				    value: '3',
				    name: '违法违规',
				    checked:false,
				  },
				  {
				    value: '4',
				    name: '非法广告',
				    checked:false,
				  },
				  {
				    value: '5',
				    name: '其他',
				    checked:false,
				  }
				],
				fromParams:{
				  user_id: null,
				  report_upf:'业主端',//举报平台
				  report_init_id:null,
				  report_type:[],//举报类型
				  report_cover_id:this.by_user_id,//被举报人
				  report_reason:null,//举报原因
				  report_images:null,//举报凭证
				  report_gy:3,//业主
				
				},
				 images:[],//保存上传的图片
			}
		},
		onLoad(options) {
			this.by_user_id=options.by_user_id
			console.log(this.by_user_id)
		},
		onShow(){
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		methods: {
			//处理按钮
			submit(){
				//校验是否选择违规类型 数组长度大于0表示有选择
				if(this.fromParams.report_type.length>0) {
				//数组类型转换字符串 覆盖原来的值
				this.fromParams.report_type = this.fromParams.report_type.toString();
			}
			this.fromParams.report_images = this.images.toString();
			
			this.$request.api.reportAdd({
				user_id:this.homelist.ownerUserId,
			    report_upf:this.fromParams.report_upf,
			    report_init_id:this.homelist.ownerUserId,
			    report_cover_id:this.by_user_id,//被举报人
			    report_type:this.fromParams.report_type,
			    report_reason:this.fromParams.report_reason,
			    report_images:this.fromParams.report_images,
			    report_gy:3,//业主
			}).then(res => {
			    this.fromParams.report_cover_id = null;
			    this.fromParams.report_reason = null;
			    this.fromParams.report_images = null;
			    this.fromParams.report_type = null;
			    	this.fromParams.report_type = [];
			    this.emp = [];
			    this.images = [];
			    uni.showToast({
			      title:"举报增加成功！",
			      success:"200"
			    })
			  })
			  this.$Router.push({
			  	path: '/pages/news/newsList'
			  })
			},
			checkboxChange: function (e) {
				this.fromParams.report_type = e.detail.value;
			},
			colseImg(val){
				if(val){
					let images = this.images;
					this.images = [];
					for(let i=0;i<images.length;i++){
						if(images[i] != val){
							this.images.push(images[i]);
						}
					}
				}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.images.push(res.data.data);
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.images.push(res.data.data);
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							});
						}
					},
					fail: function(res) {}
				});
			},
		}
		
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #FFFFFF;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.guarn-box {
		width: 100%;
		height: 145px;
		
	}
	.header-form{
		margin-top: 60rpx;
		background: #FFFFFF;
		.header-li{
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom:1rpx solid #EEEEEE;
			.header-name{
				width: 200rpx;
			}
			.text-area{
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}
	.guarn-box {
		width: 100%;
		height: 145px;
		
	}
	.guarn-box2-img{
		width:216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;
		.guarn-box2-img-close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
	.guarn-box2 image{
		width:216rpx;
		height: 216rpx;
	}
	
	.guarn-box-img{
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}
	.guarn-box-img image{
		width: 76rpx;
		height: 68rpx;
	}
	.tab_nav{
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// border-bottom: 1px solid #FFEEEEEE;
		display: flex;
		    justify-content: center;
		    align-items: center;
		    position: fixed;
		    width: 100%;
		    z-index: 10;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #427705 ;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #427705 ;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #427705;
		height: 100rpx;
		border-bottom: 1rpx solid #eeeeee;
		position: relative;
		.search-clear {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			left: 560rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.search-input {
			width: 613rpx;
			height: 66rpx;
			background: #f0f2f5;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			padding: 0 33rpx;
			color: #333333;
			box-sizing: border-box;
		}
	}
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #3d7fff;
		height: 100rpx;
		border-bottom: 1rpx solid #eeeeee;
		width: 100%;
		padding-left: 27px;
		padding-right: 31px;
		margin: -14px auto;
		position: fixed;
		    z-index: 20;
			background: #FFFFFF;
		.search-clear {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			left: 271px;
			top: 50%;
			transform: translateY(-50%);
		}
		.search-input {
			width: 312px;
			height: 66rpx;
			background: #f0f2f5;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 13px;
			padding: 0 33rpx;
			color: #333333;
			box-sizing: border-box;
		}
		.btn{
			width: 21%;
			line-height: 33px;
			// border: 1px solid red;
			border: 1px solid linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 18px;
			text-align: center;
			margin-left: -43px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		}
	}
	.new-list-box-row {
		width: 5px;
		height: 11px;
		background: #598f1aab;
		border-radius: 3px;
		margin-top: 10px;
	}
	.guarn-box-txt{
		// width: 420rpx;
		// height: 216rpx;
		color: #999;
		float: left;
	}
	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		background: linear-gradient(180deg, #76D904 0%,#417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
</style>
